<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" @change="changefun" @animationfinish="animationfinishfun" :current="0" :circular="true"
                     :vertical="true">
                        <swiper-item v-for="(item,index) in PayVideo" :key="index" @click="pause(index)">
                            <view class="swiper-item uni-bg-red">
                                <video :custom-cache="false"
									   style="width: 100%;"
									   loop="true" class="video"
									   :id="'id'+index"
									   :enable-play-gesture="true"
                                       :enable-progress-gesture="true"
									   :play-btn-position="center"
									   :controls="false" :src="item.mediaUrl" :show-center-play-btn="false">
                                </video>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
<!--		<view style="width: 100%;height: 70rpx;background: black;position: absolute;top: 0;left: 0;"></view>-->
		<view class="videoPlayer" v-if="Shows" @click="player">
			<image class="playImage" src="../../../static/img/spbf.png" mode=""></image>
		</view>
		<view class="videoPopup-top" @click="ActiveIptOff" v-if="onShow"></view><!-- 自定义评论阴影底 -->
		<view class="videoPopup" v-if="onShow">
			<view class="popup-title">
				<view class="popup-swiper">
					<view style=" font-size: 32rpx;color: #333333;position: absolute;bottom: 30rpx">共{{PayVideo[videoIndex].quantity}}条评论</view>
				</view>
				<view style="width: 70rpx;height: 60rpx;display: flex;align-items: center;flex-direction: row-reverse;position: absolute;right: 0;">
					<image @click="ActiveIptOff" style="width: 30rpx;height: 30rpx;" src="../../../static/img/guanbi.png"></image>
				</view>
			</view>
			<scroll-view scroll-y="true" class="popup-review" v-if="textShow" @scrolltolower="scrolltolower">
				<view class="review-item">
					<view class="review-parent" v-for="(item,index) in remarkData" :key="index">    <!-- 父级遍历头 -->
						<view class="review-parent-waik">
							<image class="parent-img" :src="item.userAvatar"></image>
							<view class="parent-center">
								<view class="parent-name" @click='reply(item.id,index)' @longpress="logoTime(item.id,item.uid)">
									<view class="identity">
										{{item.userName}}
										<view
											style='padding: 0 10rpx;margin-left: 20rpx;background: #FF9A00;border-radius: 6rpx;color: white;font-size: 22rpx;'
											v-if="item.author==1">作者</view>
									</view>
									<view class="parent-right" @click.stop="giveClick(item.id)">
										<view v-if="item.likes">{{item.likes}}</view>
										<image src="../../../static/img/dianzhui.png" class="parent-right-img" v-if="!item.likeFlag"></image>
										<image src="../../../static/img/dianzhuang.png" class="parent-right-img" v-else></image>
									</view>
								</view>
								<view class="parent-data" @click='reply(item.id,index)' @longpress="logoTime(item.id,item.uid)">
									{{item.content}}
								</view>
								<view class="parent-data">
									<view class="parent-time" @click='reply(item.id,index)' @longpress="logoTime(item.id,item.uid)">{{item.date}}<span style="margin-left: 20rpx;color: #666666;">回复</span></view>
									<view class="review-sublevel-waik">   <!-- 子级遍历头 -->
										<view class="review-sublevel" v-for="(items,ind) in item.replies"
											@click="replyTwo(items.commentId,index,items.id,items.userId)" :key="ind" v-if="items.replyId == 0">
											<view class="review-parent-waik" @longpress="logoTime(items.id,items.uid)">
												<image class="parent-imgs" :src="items.userAvatar"></image>
												<view class="parent-center">
													<view class="parent-name">
														<view class="identity">
															{{items.userName}}
															<view
																style='padding: 0 10rpx;margin-left: 20rpx;background: #FF9A00;border-radius: 6rpx;color: white;font-size: 22rpx;'
																v-if="items.author==1">作者</view>
														</view>
														<view class="parent-right" @click.stop="giveClick(items.id)">
															<view v-if="items.likes">{{items.likes}}</view>
															<image src="../../../static/img/dianzhui.png" class="parent-right-img" v-if="!items.likeFlag"></image>
															<image src="../../../static/img/dianzhuang.png" class="parent-right-img" v-else></image>
														</view>
													</view>
													<view class="parent-data">
														{{items.content}}
													</view>
													<view class="parent-data">
														<view class="parent-time">{{items.date}}<span style="margin-left: 20rpx;color: #666666;">回复</span></view>
													</view>
												</view>
											</view>
										</view>
										<view class="review-sublevel" v-for="(items,inde) in item.replies" :key="inde" v-if="items.replyId != 0">
											<view class="review-parent-waik" @longpress="logoTime(items.id,items.uid)">
												<image class="parent-imgs" :src="items.userAvatar"></image>
												<view class="parent-center">
													<view class="parent-name">
														<view class="parent-name-left">
															<view>{{items.userName}}</view>
															<view style="margin: 0 20rpx;">
																<image style="width: 30rpx;height: 30rpx;margin-top: 4rpx" src="../../../static/img/youjianto.png"></image>
															</view>
															<view>{{items.replyUserName}}</view>
														</view>
														<view class="parent-right" @click.stop="giveClick(items.id)">
															<view v-if="items.likes">{{items.likes}}</view>
															<image src="../../../static/img/dianzhui.png" class="parent-right-img" v-if="!items.likeFlag"></image>
															<image src="../../../static/img/dianzhuang.png" class="parent-right-img" v-else></image>
														</view>
													</view>
													<view class="parent-data">
														{{items.content}}
													</view>
													<view class="parent-data">
														<view class="parent-time">{{items.date}}<span style="margin-left: 20rpx;color: #666666;">回复</span></view>
													</view>
												</view>
											</view>
										</view>
										<view class="item-more" v-if="item.repliesNumber > 1" @click="getReplies(item.id,item.diaryId,item.replies.length,index)">
											<view v-if="item.repliesNumber > 1">
												<view style="width: 100%;display: flex;align-items: center;flex-direction: row;" v-if="item.replies.length == item.repliesNumber" @click="packUp(index)">
													收起
													<image class="more-image" style="margin-left: 20rpx;margin-top: 0rpx;transform:rotate(180deg);" width="20rpx" height="20rpx" src="@/static/diary/more2.png"></image>
												</view>
												<view style="width: 100%;display: flex;align-items: center;flex-direction: row;" v-if="item.repliesNumber > 1 && item.replies.length < 6 && item.replies.length < 5 && item.replies.length < 4 && item.replies.length < 3 && item.replies.length < 2">
													展开{{item.repliesNumber - 1}}条评论
													<image class="more-image" style="margin-left: 20rpx;margin-top: 0rpx;" width="20rpx" height="20rpx" src="@/static/diary/more2.png"></image>
												</view>
												<view style="width: 100%;display: flex;align-items: center;flex-direction: row;" v-if="item.replies.length >= 6 && item.repliesNumber > 6 && item.replies.length != item.repliesNumber">
													展开更多评论
													<image class="more-image" style="margin-left: 20rpx;margin-top: 0rpx;" width="20rpx" height="20rpx" src="@/static/diary/more2.png"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="WhetherShow" style="width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: center;color: #bcbcbc;">
					到底了，没有更多了~
				</view>
			</scroll-view>
			<view class="popup-inputs">
				<view class="inputs-nik1" :style="!isfocus?'z-index: 10;':'z-index: 0;'" @click="getFocus">
					<view style="width: 100%;">{{onTextShow?discussText2:undefined}}</view>
				</view>
				<input
					class="inputs-nik"
					:style="isfocus?'z-index: 10;':'z-index: 0;'"
					type="text"
					v-model="remarkList.content"
					@focus="focus"
					@blur="blur"
					:focus="isfocus"
					confirm-type="search"
					@confirm="doSearch"
					placeholder="吸宠不要钱，请留下评论哦～"
					cursor-spacing="20" />
			</view>
		</view>
		<view class="discuss">
			<view class="discuss-nik">
				<image class="discussImg" src="../../../static/img/xiepinlun.png" mode=""></image>
				<view class='cover-input' @click="ActiveIpt">
					<view style="color: white;width: 560rpx;height: 30rpx;position: absolute;left: 0;z-index: 9999 !important;">吸宠不要钱，请留下评论哦～</view>
				</view>
				<view style="font-size: 24rpx;color: white;position: absolute;right: 0;">{{newDate}}</view>
			</view>
		</view>
        <view v-if="is_active">
            <view class="left">
                <view class="left_box">
<!--                     <view class="ke">-->
<!--                        <image src="../../../static/images/Avatar-1.png"></image>-->
<!--                        <view>小广告放置地方</view>-->
<!--					 </view>-->
                    <view class="ren" style="display: flex;flex-direction: row;align-items: center;">
						@{{PayVideo[videoIndex].petName}}
						<view style="font-size: 28rpx;margin-left: 20rpx;font-weight: normal;">·{{PayVideo[videoIndex].date}}</view>
					</view>
                    <view class="ke_context" style="padding-bottom: 120rpx;">{{PayVideo[videoIndex].title}}</view>
                </view>
            </view>
            <view class="right">
                <view class="right_box">
                    <view class="top1">
                        <image class="avatar_img" :src="PayVideo[videoIndex].petAvatar" @click="goDetails" mode=""></image>
                        <image class="add_img" src="../../../static/img/guanzhu.png" v-if="!PayVideo[videoIndex].followFlag && !PayVideo[videoIndex].master" @click="setFocus" mode=""></image>
<!--                        <image class="add_img" src="../../../static/img/guanzhu2.png" mode=""></image>-->
                    </view>
                    <view class="top2" @click="setDown">
                        <image class="t_img" src="../../../static/img/yunxi.png" v-if="!PayVideo[videoIndex].likeFlag" mode=""></image>
                        <image class="t_img" src="../../../static/img/yunxiYellow.png" v-else mode=""></image>
                        <view class="font_t">{{PayVideo[videoIndex].likeNumber}}</view>
                    </view>
                    <view class="top2" @click="ActiveIpt">
                        <image class="t_img" src="../../../static/img/pinlun.png" mode=""></image>
                        <view class="font_t">{{PayVideo[videoIndex].quantity}}</view>
                    </view>
                    <view class="top2" style="position: relative;">
                        <image class="t_img" src="../../../static/img/share.png" mode=""></image>
                        <view class="font_t">{{PayVideo[videoIndex].shares}}</view>
						<button type="primary" open-type="share" style="width: 70rpx;height: 70rpx;position: absolute;top: 0;right: 10rpx;opacity: 0;"></button>
                    </view>
                    <view class="top2" style="padding: 40rpx 0;">
                        <!-- <image class="t_img" src="../../../static/images/Avatar-1.png" mode=""></image>
                        <view class="font_t">397</view> -->
                    </view>
                </view>
            </view>
        </view>
		<view class="popop-del" v-if="popupShow" @click="popupShow = false">
			<view class="popop-del-nik" @click.stop="delDiscuss">
				<view>删除评论</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				WhetherShow: false,   //判断是否到加载所有数据
				onReply: false,  //用来判断是否是回复评论
				popupShow: false, //删除评论弹窗
            	onTextShow: true,
				discussText2: '吸宠不要钱，请留下评论哦～',
				discussText: undefined,    //评论文本框
				isfocus: false,    //input激活输入
                index_: 0,
                is_active: true,
                PayVideo: [],    //视频数据
				remarkData: [],    //评论数据
				VideoContent: '',    //选中的视频demo
				isActice: 0,
				Shows: false,     //暂停按钮显示隐藏
				show: true,     //视频滑动结束才能再去执行暂停视频
				onShow: false,   //评论弹窗
				textShow: false,   //评论列表
				videoIndex: 0,    //选中视频下标
				page: 1,   //推荐视频页码
				size: 10,
				pageComments: 1,    //评论页码
				sizeComments: 10,
				optionsId: undefined,   //要去除数组的数据id
				dataIdsArray: [],    //视频点赞id
				CommentsArray: [],    //视频评论点赞id
				focusList: [],
				remarkList: {      //input输入框
					commentId: undefined,
					content: undefined,
					diaryId: undefined,
					replyId: undefined,
					replyUserId: undefined,
					type: 1,
					userId: undefined
				},
				delId: 0,
				total: 0
            }
        },
		// watch:{
		// 	scrollTop(){
		// 		console.log(this.scrollTop)
		// 	}
		// },
		onLoad(option){
			if(option.id){
				this.optionsId = option.id
				this.getData(option.id)
			}
		},
		onReady() {
			this.VideoContent = uni.createVideoContext('id'+ this.isActice)
		},
		onUnload(){
			if(this.CommentsArray.length > 0){
				this.like(2)
			}
			if(this.dataIdsArray.length > 0){
				this.like(1)
			}
			if(this.focusList.length > 0){
				this.focus()
			}
		},
		onShareAppMessage(res){
			let self = this
			self.$request(self.commonApi.diaryShare+self.PayVideo[self.videoIndex].id,'GET').then(res=>{})
			return {
				title: self.PayVideo[self.videoIndex].title,
				path: '/myPackageA/diary/player/player?id='+self.PayVideo[self.videoIndex].id,
				imageUrl: self.PayVideo[self.videoIndex].cover
			}
		},
        methods: {
			scrolltolower(){
				if(this.remarkData.length < this.total){
					this.pageComments += 1
					let self = this;
					let data = {
						diaryId: self.PayVideo[self.videoIndex].id,
						page: self.pageComments,
						size: self.sizeComments,
						type: 2
					}
					self.$request(self.commonApi.commentsList,'POST',data,'application/json').then(res=>{
						res.data.data.result.forEach(item=>{
							self.remarkData.push(item)
						})
					})
				}else{
					this.WhetherShow = true
				}
			},
			getDiaryNumbers(){
        		let self = this;
        		self.$request(self.commonApi.diaryNumbers+self.PayVideo[self.videoIndex].id,'GET').then(res=>{
					self.PayVideo[self.videoIndex].quantity = res.data.data
				})
			},
			setDataIdsArray(id){    //处理数组重复
				if(this.CommentsArray.indexOf(id) == '-1'){
					this.CommentsArray.push(id)
				}else{
					this.dels(id)
				}
				return this.CommentsArray
			},
			dels(i){    //删除数组已存在的数据
				let index = this.CommentsArray.indexOf(i);
				this.CommentsArray.splice(index, 1)
			},
			giveClick (id) {
				console.log(this.remarkData)
				console.log(id)
				this.remarkData.forEach(item=>{
					if(item.id != id){
						if(item.replies?item.replies.length > 0:false){
							item.replies.forEach(dats=>{
								if(dats.id == id){
									dats.likeFlag = !dats.likeFlag
									this.setDataIdsArray(id)
									if(dats.likeFlag){
										dats.likes += 1
									}else{
										dats.likes -= 1
									}
								}
							})
						}
					}else{
						item.likeFlag = !item.likeFlag
						this.setDataIdsArray(id)
						if(item.likeFlag){
							item.likes += 1
						}else{
							item.likes -= 1
						}
					}
				})
			},
			packUp(i){      //收起评论
				// this.page = 1
				this.getComments()
			},
			getReplies(id,diaryId,leng,i){     //查看二级回复
				let self = this;
				let data = {
					commentId: id,
					diaryId: diaryId,
					size: leng,
				}
				self.$request(self.commonApi.commentsReply,'POST',data,'application/json').then(result=>{
					let data = result.data.data
					data.forEach(item=>{
						self.remarkData[i].replies.push(item)
					})

				})
			},
			replyTwo(cid,i,rid,uid){
				this.isfocus = !this.isfocus
				this.onReply = true
				this.remarkList.type = 2
				this.remarkList.commentId = cid
				this.remarkList.replyId = rid
				this.remarkList.replyUserId = uid
			},
			reply(id,i){   //回复
				// this.page = 1
				this.isfocus = !this.isfocus
				this.onReply = true
				this.remarkList.type = 2    //1评论2回复
				this.remarkList.commentId = id
			},
			delDiscuss(){  //删除自己评论
				let self = this
				self.$request(self.commonApi.diaryDeletes+self.delId,'POST',{}).then(res=>{
					self.page = 1
					self.getComments()
					self.getDiaryNumbers()
					self.popupShow = false
				})
			},
			logoTime(e,uid){    //判断是否是自己发送的评论
				if(uid == uni.getStorageSync('uid')){
					this.popupShow = true
				}
				this.delId = e
			},
			getComments(){   //查看评论
				this.WhetherShow = false
				let self = this;
				let data = {
					diaryId: self.PayVideo[self.videoIndex].id,
					page: self.pageComments,
					size: self.sizeComments,
					type: 2
				}
				self.$request(self.commonApi.commentsList,'POST',data,'application/json').then(res=>{
					self.remarkData = res.data.data.result
					self.total = res.data.data.meta.total
					// this.show = false
				})
			},
			doSearch(id){    //发表评论
				if(!this.remarkList.content){
					uni.showToast({
						title: '请先填写内容',
						duration: 1500,
						icon: 'none'
					})
					return false
				}
				if(this.onReply){   //判断点击是回复还是直接评论触发input输入
					this.setReply()
				}else{
					this.remarkList.type = 1      //1评论2回复
					this.setReply()
				}
			},
			setReply(){    //添加评论
				let self = this;
				let data = {
					commentId: self.remarkList.commentId,
					content: self.remarkList.content,
					diaryId: self.PayVideo[self.videoIndex].id,
					replyId: self.remarkList.replyId,
					replyUserId: self.remarkList.replyUserId,
					type: self.remarkList.type,
					userId: self.remarkList.userId,
				}
				self.$request(self.commonApi.commentsAdd,'POST',data,'application/json').then(res=>{
					if(res.data.code == 200){
						self.remarkList.commentId = undefined,
						self.remarkList.content = undefined,
						self.remarkList.replyId = undefined,
						self.remarkList.replyUserId = undefined,
						self.remarkList.type = 1,
						self.onReply = false
						self.setFocus = false
						self.page = 1
						self.pageComments = 1
						self.getComments()
						self.getDiaryNumbers()
					}
				})
			},

        	getFocus(){
				this.remarkList.content = undefined
				this.isfocus = true
        		this.onTextShow = false
        		this.discussText2 = undefined
			},
        	blur(){
				this.remarkList.content = undefined
				this.isfocus = false
				this.onTextShow = true
				this.discussText2 = '吸宠不要钱，请留下评论哦～'
			},
			focus(){
				let self = this
				let data = {
					petIds: self.focusList
				}
				self.$request(self.commonApi.suckBatch,'POST',data,'application/json').then(res=>{
					self.focusList = []
				})
			},
			like(e){    //评论日记点赞
				let self = this;
				let dataIds = []
				if(e === 1){
					dataIds = self.dataIdsArray
				}
				if(e === 2){
					dataIds = self.CommentsArray
				}

				let data = {
					dataIds: dataIds,
					type: e
				}
				self.page = 1
				self.$request(self.commonApi.opsLike,'POST',data,'application/json').then(res=>{
					self.dataIdsArray = []
					self.CommentsArray = []
					// self.getComments()
					// self.getData()
				})
			},
			getData(id){   //通过id查询日记信息
				let self = this
				self.$request(self.commonApi.diaryId+id,'GET').then(res=>{
					let data = res.data.data
					self.PayVideo.push(data)
					let oldData = data
					uni.setStorageSync('PayVideos', oldData);
					self.getPayler()
					this.$nextTick(function() {
						uni.createVideoContext('id0').play()
					})
				})
			},
			deletes(i){    //删除数组已存在的数据
				let index = this.dataIdsArray.indexOf(i);
				this.dataIdsArray.splice(index, 1)
			},
			goDetails(){
				if(this.focusList.length > 0){
					this.focus()
				}
				uni.navigateTo({
					url: '../../../pages/pet/home/home?id='+ this.PayVideo[this.videoIndex].pid
				})
			},
			setFocus(){
				let self = this
				if(!self.PayVideo[self.videoIndex].followFlag){
					self.focusList.push(self.PayVideo[this.videoIndex].pid)
					self.PayVideo.forEach(items=>{
						if(items.pid == self.PayVideo[self.videoIndex].pid){
							self.PayVideo[self.videoIndex].followFlag = true
							items.followFlag = true
						}
					})
				}

			},
			setDown(){
				this.PayVideo[this.videoIndex].likeFlag = !this.PayVideo[this.videoIndex].likeFlag
				if(this.PayVideo[this.videoIndex].likeFlag){
					this.PayVideo[this.videoIndex].likeNumber += 1
					let oldData = uni.getStorageSync('PayVideos')
					if(oldData[this.videoIndex].likeFlag !== this.PayVideo[this.videoIndex].likeFlag){
						this.dataIdsArray.push(this.PayVideo[this.videoIndex].id)
					}else{
						this.deletes(this.videoIndex)
					}
				}else{
					this.PayVideo[this.videoIndex].likeNumber -= 1
					let oldData = uni.getStorageSync('PayVideos')
					if(oldData[this.videoIndex].likeFlag !== this.PayVideo[this.videoIndex].likeFlag){
						this.dataIdsArray.push(this.PayVideo[this.videoIndex].id)
					}else{
						this.deletes(this.videoIndex)
					}
				}
			},
			getPayler(){
				let self = this
				let datas = {
					dairyId: self.optionsId,
					page: self.page,
					size: self.size,
				}
				self.$request(self.commonApi.diaryVideos,'POST',datas,'application/json').then(res=>{
					let data = res.data.data
					data.result.forEach(item=>{
						if(item.type == 2){
							self.PayVideo.push(item)
							let oldData = self.PayVideo
							uni.setStorageSync('PayVideos', oldData);
						}
					})

				})
			},
			ActiveIptOff(){  //关闭评论页码
				this.remarkData = []
				this.onShow = false
				this.textShow = false
				if(this.CommentsArray.length > 0){
					this.like(2)
				}
			},
			ActiveIpt(){    //打开评论页码
				this.pageComments = 1
				this.getComments()   //获取视频评论
				this.getDiaryNumbers()   //获取评论总数
				this.onShow = true
				this.textShow = true
			},
			player(){     //播放视频
				uni.createVideoContext('id'+ this.videoIndex).play()
				// .seek(0)    //重新播放
				this.Shows = false
			},
			pause(i){     //关闭视频
				if(this.show){
					uni.createVideoContext('id'+ i).pause()
					this.Shows = true
					this.videoIndex = i
				}
			},
            changefun(e) {    //往下滑动触发
				this.videoIndex = e.detail.current
				this.Shows = false
				this.show = false
				uni.createVideoContext('id' + this.videoIndex).pause()
            },
            animationfinishfun(e) {    //动画结束后触发
				this.videoIndex = e.detail.current
				if(e.detail.current == (10*this.page-5)){
					this.page += 1
					this.getPayler()
				}
				this.isActice = e.detail.current
				this.show = true
                let {
                    index_,
                } = this
                let current = e.detail.current
                this.is_active = true
                let videoContext = uni.createVideoContext('id' + index_)
                videoContext.pause()
                videoContext = uni.createVideoContext('id' + current)
                videoContext.play()
                this.index_ = current
            },
        },
        mounted() {

        }
    }
</script>

<style scoped lang="less">
	.item-more{
		color: #FF9A00;
		font-size: 28rpx;
	}
	.more-image{
		width: 30rpx;
		height: 30rpx;
	}
	.popop-del-nik{
		width: 560rpx;
		height: 100rpx;
		background: white;
		z-index: 12;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popop-del{
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 12;
		background: rgba(0 , 0 , 0 , 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup-review-input{
		width: 100%;
		padding: 18rpx 10rpx;
		// position: absolute;
		// left: 0;
		// top: 0;
	}
	.popup-review-text{
		width: 100%;
		font-size: 28rpx;
		line-height: 60rpx;
		word-break: break-all;
		white-space: normal;
		padding: 27rpx 10rpx;
		position: absolute;
		left: 0;
	}
	.popup-input{
		width: 700rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 80rpx;
		background: #F6F6F6;
		border-radius: 20rpx;
		margin-top: 40rpx;
		position: relative;
		overflow-y: scroll;
	}
	.review-sublevel{
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	.review-sublevel-waik{
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-top: 10rpx;
	}
	.parent-data{
		width: 100%;
		padding: 0 0 15rpx 0;
		font-size: 28rpx;
		color: #333333;
		word-break: break-all;
		white-space: normal;
		display: flex;
		flex-direction: column;
	}
	.parent-time{
		width: 100%;
		padding: 0 0 15rpx 0;
		font-size: 22rpx;
		color: #999999;
	}
	.identity{
		width: 60%;
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 24rpx;
		color: #999999;
	}
	.parent-name-left{
		width: 80%;
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 24rpx;
		color: #999999;
	}
	.parent-name{
		width: 100%;
		padding: 0 0 15rpx 0;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
	.parent-right-img{
		width: 36rpx;
		height: 38rpx;
		margin-right: 14rpx;
	}
	.parent-right{
		z-index: 12;
		color: #999999;
		font-size: 28rpx;
		padding-top: 10rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		position: absolute;
		right: 0rpx;
	}
	.parent-center{
		width: calc(100% - 80rpx);
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}
	.parent-imgs{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		// padding-right: 20rpx;
	}
	.parent-img{
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		// padding-right: 20rpx;
	}
	.review-parent-waik{
		width: 100%;
		display: flex;
		flex-direction: row;
		position: relative;
	}
	.review-parent{
		width: 700rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}
	.review-item{
		width: 100%;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.inputs-nik1{
		font-size: 26rpx;
		width: 680rpx;
		height: 80rpx;
		background: #F6F6F6;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		position: absolute;
		bottom: 20rpx;
		padding: 0 6rpx;
		z-index: 5;
	}
	.inputs-nik{
		font-size: 26rpx;
		width: 670rpx;
		height: 80rpx;
		background: #f2f2f2;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		position: absolute;
		bottom: 20rpx;
		padding: 0 15rpx;
	}
	.popup-inputs{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 20rpx;
		left: 0;
	}
	.popup-review{
		width: 100%;
		height: 850rpx;
		overflow-y: scroll;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.popup-swiper{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup-title{
		width: 700rpx;
		height: 100rpx;
		padding-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		font-weight: bold;
		position: relative;
	}
	.videoPopup-top{
		width: 100%;
		height: 100vh;
		background: rgba(0 , 0 , 0 , 0.7);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 11;
	}
	.videoPopup{
		width: 100%;
		height: 1100rpx;
		animation: height 0.4s;
		background: white;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 11;
		border-radius: 15rpx 15rpx 0 0;
		box-shadow: -1px 0px 9px 0px rgba(0,0,0,0.15);
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.cover-text{
		width: 560rpx;
		height: 60rpx;
		color: white;
		position: absolute;
		left: 0;
		z-index: 1;
		background: red;
	}
	.cover-input{
		width: 560rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		position: relative;
	}
	.discussImg{
		width: 42rpx;
		height: 42rpx;
		margin-right: 20rpx;
	}
	.discuss-nik{
		width: 700rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		position: relative;
	}
	.discuss{
		width: 100%;
		height: 100rpx;
		padding-bottom: 40rpx;
		padding-top: 15rpx;
		background: rgba(25,25,25,0.28);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}
	.playImage{
		width: 150rpx;
		height: 150rpx;
	}
	.videoPlayer{
		width: 750rpx;
		/*height: 100vh;*/
		/*background: rgba(255,255,255,0);*/
		position: absolute;
		left: 0;
		top: 45%;
		/*top: 0;*/
		display: flex;
		align-items: center;
		justify-content: center;
		/*z-index: 1 !important;*/
	}
    .circle {

        background: rgba(34, 34, 34, 0.4);

        border-radius: 50%;
        z-index: 2;
        height: 70px;
        width: 70px;
        position: fixed;
        top: 0;

        bottom: 441rpx;
        left: 31rpx;

        margin: auto;

        .red {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            z-index: 3;
            height: 35px;
            width: 35px;
        }
    }

    .swiper {
		height: 100vh;

        .swiper-item {
			width: 100%;
            height: 100%;
            position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			video{
				width: 100%;
				height: 100%;
				object-fit: fill;
			}
        }

        .uni-bg-red {
            background: black;
        }

        .uni-bg-green {
            background: green;
        }

        .uni-bg-blue {
            background: blue;
        }
    }

    /*.video {*/
    /*    width: 100%;*/
    /*    min-height: 100%;*/
    /*    position: relative;*/
	/*	!*margin-top: 70rpx;*!*/
    /*}*/

    .left_box {
        position: fixed;
        bottom: 60rpx;
        left: 24rpx;

        .ke_context {

            width: 516rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre-line;
            white-space: normal;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
        }

        .ren {

            margin: 20rpx 0;
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
        }

        .auto {
            display: flex;
            align-items: center;
            width: 310rpx;
            height: 60rpx;
            margin-top: 24rpx;
            opacity: 1;
            border-radius: 8rpx;
            padding-left: 10rpx;

            view {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 90px;
                text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
            }

            image {
                margin-right: 10rpx;
                height: 28rpx;
                width: 26rpx;
            }
        }

        .ke {
            display: flex;
            align-items: center;
            width: 310rpx;
            height: 60rpx;
            background: rgba(0, 0, 0, 0.3);
            opacity: 1;
            border-radius: 8rpx;
            padding-left: 10rpx;

            view {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 90px;
                text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
            }

            image {
                margin-right: 10rpx;
                height: 40rpx;
                width: 40rpx;
            }
        }
    }

    .H_T {
        z-index: 2;
        width: 100%;
        display: flex;
        box-sizing: border-box;
        position: absolute;
        padding: 0 30rpx;
        background: transparent;
        justify-content: space-between;

        .back {
            height: 48rpx;
            width: 48rpx;
        }

        .search {
            height: 48rpx;
            width: 48rpx;
        }
    }

    .right_box {
        width: 100rpx;
        position: absolute;
        z-index: 2;
        bottom: 160rpx;
        right: 12rpx;
        display: flex;
        flex-direction: column;

        .top1 {
            position: relative;
            height: 124rpx;

            .avatar_img {
                width: 92rpx;
                height: 92rpx;
                border-radius: 50%;
            }

            .add_img {
                position: absolute;
                z-index: 99;
                width: 38rpx;
                height: 38rpx;
                bottom: 10rpx;
                left: 0;
                right: 0;
                margin: 0 auto;
            }
        }

        .top2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 37rpx;

            .t_img {
                height: 66rpx;
                width: 66rpx;
                margin-bottom: 10rpx;
            }

            .font_t {
                font-size: 26rpx;
                font-family: SF Pro Text;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);

                text-shadow: 0px 1rpx 1rpx rgba(0, 0, 0, 0.4);
                text-align: center;
            }
        }

    }
</style>
